<template>
    <pageTabelLayout>
        <template #pageHeader>
            <div class="search-form isheader" v-if="headerShow">
                <div>
                    <a-form size="small" :model="queryData" layout="inline">
                        <a-form-item label="车牌号">
                            <!-- <a-select popup-container="html"  class="bacClass" :style="{ width: '200px' }" :loading="loading" @search="handleSearch"
                            v-model="pageData.dropDownData" :filter-option="false" allow-search allow-clear
                            @focus="focusSel">
                            <a-option v-for="item in pageData.nameList" :key="item" :value="item">{{ item }}</a-option>
                        </a-select> -->
                            <a-input class="bacClass" v-model="pageData.dropDownData" :style="{ width: '200px' }"
                                allow-clear></a-input>
                        </a-form-item>

                    </a-form>
                </div>
                <div class="my-tool-bar">
                    <Toolbar :items="[
                        `${permissionStore.hasPermisson('cph.cx') ? '查询' : ''}`,
                        `${permissionStore.hasPermisson('cph.xz') ? '新增' : ''}`,
                        `${permissionStore.hasPermisson('cph.sc') ? '删除' : ''}`,]" @add="addHandler"
                        @del="deleteHandler" @select="selectHandler" @export="exports" @import="importHandler"
                        @excel="downloadHandler">
                    </Toolbar>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
            <!-- <div class="my-tool-bar">
                <Toolbar :items="['查询', '新增', '删除',]" @add="addHandler" @del="deleteHandler" @select="selectHandler"
                    @export="exports" @import="importHandler" @excel="downloadHandler">
                </Toolbar>
            </div> -->
        </template>
        <template #pageTabel>

            <!-- <a-table style="height:100%"
                                 size="mini" :scrollbar="true" sticky-header @page-change="pagination.change"
                                 @change="handleChange"
                                 :draggable="{type:'handle',width:20,fixed:true}"
                                 stripe :bordered="true" :columns="tableColumns"
                                 :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
                                 v-model:selected-keys="selectedRowKeys" :loading="pageData.pageLoading"
                                 :data="table.dataList"
                                 :pagination="{ size: 'small', current: pagination.page, pageSize: pagination.pageSize, total: pagination.total, showPageSize: false, pageSizeOptions: [10, 20, 30, 50, 100] }"
                                 :rowKey="rowKey">
                            <template #edit="{ record }">
                                <a-button type="primary" size="small" status="warning" @click="editHandler(record)"
                                          v-if="pageData.isEdit">
                                    <template #icon>
                                        <icon-edit/>
                                    </template>
                                    修 改
                                </a-button>
                            </template>
                        </a-table> -->
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :suppressDragLeaveHidesColumns="true" rowSelection="multiple"
                @grid-ready="gridReady" @columnResized="onColumnResized" @columnMoved="onColumnMoved"
                @columnVisible="onColumnVisible" style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                :rowData="table.dataList" :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
                <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
            @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="size"
            :current="page" />
        </template>
        
        <a-drawer ok-text='保存' cancel-text='关闭' :drawer-style="{ 'zIndex': 9999 }" :mask-closable="false" :width="400"
            :visible="pageData.showAdd" :ok-loading="pageData.pageLoading" unmountOnClose @ok="sideOk"
            @cancel="pageData.showAdd = false">
            <template #title>
                {{ pageData.sideTitle }}
            </template>
            <div>
                <a-form ref="formRef" layout="horizontal" :model="dataForm">
                    <!-- <a-form-item label-col-flex="80px" label="编号" field="fabricCode"
                        :rules="[{ validator: isChiese }, { required: true, message: '编号必填' }]"
                        :validate-trigger="['change', 'blur']">
                        <a-input class="bacClass" placeholder="请输入编号" v-model="dataForm.fabricCode" @blur="inputBlur" />
                    </a-form-item> -->
                    <a-form-item label-col-flex="80px" label="选择车牌号">
                        <a-button type="primary" @click="chepais">请输入车牌号</a-button>
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="车牌号" field="fabricType"
                        :rules="[{ required: true, message: '车牌号必填' }]" :validate-trigger="['change', 'blur']">
                        <!-- <a-input class="bacClass" placeholder="请输入车牌号" v-model="dataForm.fabricType" /> -->
                        <!-- <a-input class="bacClass" disabled v-model="dataForm.fabricType" /> -->
                        <a-button disabled>{{ dataForm.fabricType }}</a-button>
                        <!-- <a-input disabled v-model="dataForm.fabricType" /> -->
                        <!-- <span>{{
                            dataForm.fabricType
                        }}</span> -->
                    </a-form-item>
                    <a-form-item label-col-flex="80px" label="备注" field="remark">
                        <!-- <a-input class="bacClass"  v-model="dataForm.remark"/> -->
                        <a-textarea class="bacClass" placeholder="" v-model="dataForm.remark" :max-length="400" allow-clear
                            show-word-limit />
                    </a-form-item>
                </a-form>
            </div>
        </a-drawer>
        <a-modal v-model:visible="visible" :on-before-ok="handleOk" @cancel="handleCancel" :width="500">
            <template #title>
                车牌号
            </template>
            <a-tabs   :lazy-load="true" :default-active-key="1" @change="tabsChange">
                <a-tab-pane :key="1" title="车牌">
                    <div class="isChepais">
                        <a-dropdown @select="handleSelect">
                            <a-button>{{ chepai1 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect2">
                            <a-button>{{ chepai2 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas3">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect3">
                            <a-button>{{ chepai3 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect4">
                            <a-button>{{ chepai4 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect5">
                            <a-button>{{ chepai5 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect6">
                            <a-button>{{ chepai6 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect7">
                            <a-button>{{ chepai7 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                    </div>
                </a-tab-pane>
                <a-tab-pane :key="2" title="新能源车牌">
                    <div class="isChepais">
                        <a-dropdown @select="handleSelect">
                            <a-button>{{ chepai1 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect2">
                            <a-button>{{ chepai2 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas3">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect3">
                            <a-button>{{ chepai3 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect4">
                            <a-button>{{ chepai4 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect5">
                            <a-button>{{ chepai5 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect6">
                            <a-button>{{ chepai6 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect7">
                            <a-button>{{ chepai7 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                        <a-dropdown @select="handleSelect8">
                            <a-button>{{ chepai8 }}</a-button>
                            <template #content>
                                <a-doption :style="{ width: '50px' }" v-for="item in chepaiIsDtas2">{{ item }}</a-doption>
                            </template>
                        </a-dropdown>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-modal>
    </pageTabelLayout>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table';
import emitter from "@/hooks/useEventBus";
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue';
import { Form, Message, Modal } from '@arco-design/web-vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { baseURL } from '../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'

import { localeText } from '@/api/aggridZw'
import usePermission from '@/store/modules/permission'
import { pagingList } from '@/api/paging'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
interface Cloth {
    fabricCode: string,
}

interface FabricInfo {
    "fabricCode": string,
    "createTime": string,
    "remark": string,
    "updateTime": string,
    "id": any,
    "fabricType": string,
    "updateName": string,
    "createName": string,
    "deleteState": number | string
}

export default {
    name: "Chepaihao",
    setup() {
        const permissionStore: any = usePermission()
        const headerShow = ref<boolean>(true)
        const total = ref(10);
        const page = ref(1);
        const size = ref(10);
        function PageSize(val: any) {
            page.value = val
            doRefresh();
        }
        function change1(val: any) {
            size.value = val
            doRefresh();
        }

        function doRefresh() {
            pageData.pageLoading = true
            updateGridState01()
            post({
                url: "dict/licensePlate/getPage",
                data: {
                    page: page.value,
                    size: size.value,
                    licensePlateName: pageData.dropDownData
                },
            })
                .then(({ data, code }: any) => {
                    if (code === 200) {
                        // 查询方法改

                        gridOption.value.setRowData(data.list)

                        table.handleSuccess(data.list);
                        total.value = data.total;
                        console.log(table.dataList);

                    }
                })
                .catch(console.log).finally(() => {
                    pageData.pageLoading = false
                });
        }

        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const pagination = usePagination(doRefresh);
        const table = useTable();
        const rowKey = useRowKey("id");
        const tableColumns = useTableColumn([
            {
                title: "车牌号",
                key: "licensePlateName",
                dataIndex: "licensePlateName",
                width: 150
            },
            {
                title: "备注",
                key: "remark",
                dataIndex: "remark",
                width: 150
            },
            {
                title: "创建人",
                key: "createName",
                dataIndex: "createName",
                width: 150
            },
            {
                title: "创建时间",
                key: "createTime",
                dataIndex: "createTime",
                width: 200
            },
            {
                title: "最后修改人",
                key: "updateName",
                dataIndex: "updateName",
                width: 150
            },
            {
                title: "最后修改时间",
                key: "updateTime",
                dataIndex: "updateTime",
                width: 200
            },
            // {
            //     title: "编辑",
            //     key: "edit",
            //     dataIndex: "edit",
            //     slotName: 'edit',
            //     width: 150, fixed: 'right'
            // },
        ]);
        const pageData = reactive<{
            showAdd: boolean,
            sideTitle: string,
            nameList: [],
            dropDownData: any,
            pageLoading: boolean,
            rHeight: any,
            btnList: any[],
            isEdit: boolean
        }>({
            showAdd: false,
            sideTitle: '新增面料种类',
            nameList: [],
            dropDownData: "",
            pageLoading: false,
            rHeight: "",
            btnList: [],
            isEdit: false
        });
        //下拉框得到焦点
        const focusSel = () => {
            selCxAll({
                fabricType: "",
                deleteState: 0
            })
        }
        //下拉数据
        const options = ref<any>(pageData.nameList);
        const loading = ref(false);
        const handleSearch = (value: any) => {
            if (value) {
                const ob = {
                    fabricType: value,
                    deleteState: 0
                }
                loading.value = true;
                selCxAll(ob);
                options.value = pageData.nameList;
                loading.value = false;

            } else {
                options.value = []
            }
        };

        //下拉框查询
        function selCxAll(val: any) {
            post({
                url: "product/pdFabric/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    let dataList: any = [];
                    data.forEach(function (o: any) {
                        dataList.push(o["fabricType"])
                    });
                    pageData.nameList = dataList;
                    console.log(pageData.nameList);

                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        }


        onMounted(() => {
            doRefresh()
        });
        //查询
        let cxbl = ""
        const selectHandler = () => {
            page.value = 1
            cxbl = pageData.dropDownData
            doRefresh();
        }
        const queryData = reactive({
            firm: "",
            clothType: ""
        });
        const addHandler = () => {
            for (const key in dataForm) {
                if (key === 'id') {
                    dataForm[key] = null;
                } else {
                    dataForm[key] = "";
                }
            }
            pageData.showAdd = true
            pageData.sideTitle = '新增车牌号'

        }
        const dataForm = reactive<FabricInfo>({
            "id": null,
            "fabricCode": "",
            "remark": "",
            "fabricType": "",
            "createTime": "",
            "updateTime": "",
            "updateName": "",
            "createName": "",
            "deleteState": 0
        })
        // 表格准备事件
        const gridOption = ref()
        const colState = ref()
        const gridReady = (params: any) => {
            gridOption.value = params.api
            colState.value = params.columnApi
        }



        const formRef = ref<FormInstance>()
        const sideOk = () => {
            formRef.value?.validate().then((err) => {
                if (!err) {
                    pageData.pageLoading = true;
                    if (pageData.sideTitle === "新增车牌号") {
                        post({
                            url: "dict/licensePlate/insert",
                            data: {
                                licensePlateName: dataForm.fabricType,
                                remark: dataForm.remark
                            },
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;
                                for (const key in dataForm) {
                                    if (key === 'id') {
                                        dataForm[key] = null;
                                    } else {
                                        dataForm[key] = "";
                                    }
                                }
                                Message.success({
                                    content: "新增成功",
                                    duration: 5000,
                                });
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }
                            doRefresh();
                        }).finally(() => {
                            pageData.pageLoading = false
                        })
                    } else {
                        post({
                            url: "product/pdFabric/update",
                            data: [dataForm],
                        }).then((res: any) => {
                            if (res.code === 200) {
                                formRef.value?.resetFields();
                                pageData.showAdd = false;

                                Message.success({
                                    content: "修改成功",
                                    duration: 5000,
                                });
                            } else {
                                Message.error({
                                    content: res.message,
                                    duration: 5000,
                                });
                            }
                            doRefresh();
                        }).finally(() => {
                            pageData.pageLoading = false
                        })
                    }
                }
            });
        };
        const deleteHandler = () => {
            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选');
                return
            }
            Modal.confirm({
                title: '系统提示',
                content: '确认删除选中的数据?',
                draggable: true,
                onOk() {
                    pageData.pageLoading = true;
                    post({
                        url: 'dict/licensePlate/delete',
                        data: gridOption.value.getSelectedRows().map((o: any) => { return o.id })
                    }).then(({ code, message }: any) => {
                        if (code === 200) {
                            Message.success({
                                content: '删除成功',
                                duration: 5000
                            })
                            pagination.page = 1
                            doRefresh()
                        } else {
                            Message.error({
                                content: message,
                                duration: 5000
                            })
                        }

                    }).finally(() => {
                        pageData.pageLoading = false
                    })
                }
            })
        }
        const editHandler = (record: FabricInfo) => {
            dataForm.id = record.id;
            dataForm.fabricCode = record.fabricCode;
            dataForm.remark = record.remark;
            dataForm.fabricType = record.fabricType;
            pageData.sideTitle = '修改车牌号'
            pageData.showAdd = true
        };
        //判断是否填写了中文
        const isChiese = (value: string, cb: Function) => {
            return new Promise<void>(resolve => {
                if (window.encodeURI(value).indexOf('%') !== -1) {
                    cb('填写的值不能包含中文！')
                }
                resolve()
            })

        }
        //input离开焦点 将小写转大写
        const inputBlur = () => {
            dataForm.fabricCode = dataForm.fabricCode.toUpperCase();
        }
        //导出
        const exports = () => {
            if (gridOption.value.getSelectedRows().length === 0) {
                Message.error('请先勾选');
                return
            } else {
                let idList: any = []
                gridOption.value.getSelectedRows().forEach(function (o: any) {
                    idList.push(o['id'])
                })
                //将表头拼接出来
                let head = "<th>编号</th><th>面料种类</th><th>备注</th><th>创建人</th><th>创建时间</th><th>最后修改人</th><th>最后修改时间</th>"
                //拿到当前表格数据与勾选的行做筛选

                let nowRow = table.dataList.filter(function (o) {
                    return (gridOption.value.getSelectedRows().map((o: any) => { return o.id })).indexOf(o["id"]) !== -1;
                })
                let body = "";
                nowRow.forEach(function (o) {
                    body += "<tr><td>" + o["fabricCode"] + "</td>";
                    body += "<td>" + o["fabricType"] + "</td>";
                    body += "<td>" + o["remark"] + "</td>";
                    body += "<td>" + o["createName"] + "</td>";
                    body += "<td>" + o["createTime"] + "</td>";
                    body += "<td>" + o["updateName"] + "</td>";
                    body += "<td>" + o["updateTime"] + "</td>";
                    body += "</tr>";
                })
                tableToXlsx(head, '面料种类', body)

            }
        }

        function tableToXlsx(head: any, filename: any, body: any) {
            const uri = 'data:application/vnd.ms-excel;base64,',
                template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1"><tr>${head}</tr>${body}</table></body>
        </html>`;

            const a = document.createElement('a');
            a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
            a.download = filename;
            a.click();
            document.removeChild(a);
        }

        //模板下载
        const downloadHandler = () => {
            axios.get(baseURL + '/product/pdFabric/uploadModel', {
                responseType: 'blob',
                headers: {
                    token: sessionStorage.getItem('USER-TOKEN-KEY')
                }
            }).then((res) => {
                if (res.status === 200) {
                    filedownload(res.data, '面料种类.xlsx')
                }
            })
        }
        //导入
        const importHandler = () => {

            const inputEle: HTMLInputElement = document.createElement('input')
            inputEle.type = 'file'
            inputEle.id = 'fileUploadExcel'
            inputEle.accept = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'
            inputEle.addEventListener('change', (e) => {
                const formData = new FormData()
                if (inputEle.files !== null) {
                    formData.append('file', inputEle.files[0] || '')
                } else {
                    Message.warning('未选择文件！');
                    return
                }
                pageData.pageLoading = true
                axios.post(baseURL + '/product/pdFabric/importModelData', formData, {
                    headers: {
                        "Content-Type": 'multipart/form-data',
                        "token": sessionStorage.getItem('USER-TOKEN-KEY')
                    },
                }).then((result) => {
                    if (result.data['code'] === 200) {
                        Message.success('导入成功')
                    } else {
                        Message.error(result.data.message)
                    }
                }).finally(() => {
                    pageData.pageLoading = false
                    doRefresh()
                })
            })
            inputEle.click()
        }
        //设置权限
        // ['查询', '新增', '删除', '导出', '导入']
        // const permissionStore = usePermission()

        // if (permissionStore.hasPermisson('mlzl.cx')) {

        //     pageData.btnList.push("查询")
        // }
        // if (permissionStore.hasPermisson('mlzl.xz')) {
        //     pageData.btnList.push("新增")
        // }
        // if (permissionStore.hasPermisson('mlzl.sc')) {
        //     pageData.btnList.push("删除")
        // }
        // if (permissionStore.hasPermisson('mlzl.xg')) {
        //     pageData.isEdit = true
        // }
        const handleChange = (_data: any) => {
            table.handleSuccess(_data);
        }
        let tc: any[] = tableColumns.map((o: any) => {

            let obj = {
                headerName: o.title,
                field: o.key,
                pinned: o['fixed']
            }
            if (o.slotName === 'edit') {
                obj['resizable'] = false
                obj['filter'] = false
                obj['sortable'] = false
                obj["lockPosition"] = "right"

                obj['cellRenderer'] = {
                    template: `<a-tag color="#ff7d00" v-if="b" class="gesture" @click="a">修改</a-tag>`,
                    setup(props: any) {
                        const a = () => {
                            editHandler(props.params.data)
                        }
                        return {
                            b: pageData.isEdit,
                            a
                        }
                    }

                }
            }

            return obj
        })

        let a = [{
            showRowGroup: 'hide_def',
            "headerName": "",
            "checkboxSelection": true,
            "headerCheckboxSelection": true,
            "pinned": "left",
            "width": 50,
            resizable: false,
            filter: false,
            sortable: false,
            minWidth: 50,
            maxWidth: 50,
            lockPosition: "left",
        }]
        tc = a.concat(tc)
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            flex: 1
        }
        const chepais = () => {
            visible.value = true
        }
        const visible = ref(false)
        const handleOk = () => {
            if (keys == 1) {
                if (chepai1.value == '' || chepai2.value == '' || chepai3.value == '' || chepai4.value == '' || chepai5.value == '' || chepai6.value == '' || chepai7.value == '') {
                    Message.error('请输入完整车牌')
                    return false
                } else {
                    dataForm.fabricType = chepai1.value + chepai2.value + chepai3.value + chepai4.value + chepai5.value + chepai6.value + chepai7.value
                    chepai1.value = ''
                    chepai2.value = ''
                    chepai3.value = ''
                    chepai4.value = ''
                    chepai5.value = ''
                    chepai6.value = ''
                    chepai7.value = ''
                    chepai8.value = ''
                    return true
                }
            } else {
                if (chepai1.value == '' || chepai2.value == '' || chepai3.value == '' || chepai4.value == '' || chepai5.value == '' || chepai6.value == '' || chepai7.value == '' || chepai8.value == '') {
                    Message.error('请输入完整车牌')
                    return false
                } else {
                    dataForm.fabricType = chepai1.value + chepai2.value + chepai3.value + chepai4.value + chepai5.value + chepai6.value + chepai7.value + chepai8.value
                    chepai1.value = ''
                    chepai2.value = ''
                    chepai3.value = ''
                    chepai4.value = ''
                    chepai5.value = ''
                    chepai6.value = ''
                    chepai7.value = ''
                    chepai8.value = ''
                    return true
                }
            }

        }
        const handleCancel = () => {
            chepai1.value = ''
            chepai2.value = ''
            chepai3.value = ''
            chepai4.value = ''
            chepai5.value = ''
            chepai6.value = ''
            chepai7.value = ''
            chepai8.value = ''
            visible.value = false
        }
        const chepai1 = ref('')
        const chepai2 = ref('')
        const chepai3 = ref('')
        const chepai4 = ref('')
        const chepai5 = ref('')
        const chepai6 = ref('')
        const chepai7 = ref('')
        const chepai8 = ref('')
        const handleSelect = (v: any) => {
            chepai1.value = v
        }
        const handleSelect2 = (v: any) => {
            chepai2.value = v
        }
        const handleSelect3 = (v: any) => {
            chepai3.value = v
        }
        const handleSelect4 = (v: any) => {
            chepai4.value = v
        }
        const handleSelect5 = (v: any) => {
            chepai5.value = v
        }
        const handleSelect6 = (v: any) => {
            chepai6.value = v
        }
        const handleSelect7 = (v: any) => {
            chepai7.value = v
        }
        const handleSelect8 = (v: any) => {
            chepai8.value = v
        }
        const chepaiIsDtas = ref(['京', '粤', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '渝'
            , '苏', '浙', '皖', '闽', '赣', '鲁', '鄂', '沪', '宁',
            '桂', '琼', '川', '贵', '云', '藏', '陕', '新',
            '豫', '湘', '青', '甘'
        ])
        const chepaiIsDtas2 = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'
            , 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
            'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
            'Z', 'X', 'C', 'V', 'B', 'N', 'M',
        ])
        const chepaiIsDtas3 = ref([
            , 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
            'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
            'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
        ])
        let keys: any = 1
        const tabsChange = (e: any) => {
            keys = e
        }
        const localeText1: any = ref(localeText)
        const pagingList1: any = ref(pagingList)
        const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('Chepaihao-1', gridOption, colState, tc)
        const onColumnMoved = () => {
            saveGridState01()
        }
        const onColumnResized = () => {
            saveGridState01()
        }
        const onColumnVisible = () => {
            saveGridState01()
        }
        return {
            saveOrUpdateGridState01,
            saveGridState01,
            updateGridState01,
            onColumnMoved,
            onColumnResized,
            onColumnVisible,
            colState,
            pagingList1,
            localeText1,
            handleSelect8,
            chepai8,
            tabsChange,
            chepaiIsDtas3,
            chepaiIsDtas2,
            chepaiIsDtas,
            handleSelect,
            handleSelect2,
            handleSelect3,
            handleSelect4,
            handleSelect5,
            handleSelect6,
            handleSelect7,
            chepai1,
            chepai2,
            chepai3,
            chepai4,
            chepai5,
            chepai6,
            chepai7,
            handleCancel,
            handleOk,
            visible,
            chepais,
            defaultColDef,
            tc,
            total,
            PageSize,
            change1,
            page,
            size,
            deleteHandler,
            sideOk,
            formRef,
            dataForm,
            addHandler,
            selectedRowKeys,
            pagination,
            tableColumns,
            table,
            rowKey,
            pageData,
            queryData,
            selectHandler,
            editHandler,
            isChiese,
            inputBlur,
            exports,
            options,
            loading,
            handleSearch,
            focusSel,
            downloadHandler,
            importHandler,
            headerShow,
            handleChange,
            gridReady,
            permissionStore
        };
    },
    components: { Toolbar,  }
}
</script>
<style scoped lang="less">
.isChepais {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.cwTitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.selectCc {
    width: 100%;
    text-align: right;
    margin-right: 20px;
    margin-bottom: 10px;
}

.selectCc {
    width: 100%;
    text-align: right;
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}
</style>
